<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的钱包</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
          body{background:#FFF;}
          .moneyDiv{
              position:relative;
              margin-top:0.15rem;
              width:100%;
          }
          .moneyDiv .bg{
            display: block;
            width:100%;
          }
          .moneyDiv .left{
            position:absolute;
            left:8%;
            top:49%;
            transform: translate(0,-50%);
          }
          .moneyDiv .left h3{
            color:#FFF;
            font-weight:bold;
            font-size:0.41rem;
          }
          .moneyDiv .left span{
            color:#FFF;
            font-weight:bold;
            display: block;
            font-size:0.31rem;
            margin-bottom:0.22rem;
          }
          .moneyDiv .right{
            position:absolute;
            right:8%;
            top:49%;
            transform: translate(0,-50%);
          }
          .moneyDiv .right button{
            display: block;
            height:0.6rem;
            line-height:0.6rem;
            background:#FFF;
            color:#F30;
            border-radius:3rem;
            width:1.5rem;
            text-align:center;
            font-size:0.28rem;
          }
          .moneyDiv .right button:nth-child(1){
            margin-bottom:0.31rem;
          }
          .detailed{
            margin-top:0.4rem;
            padding:0 0.08rem;
          }
          .detailed .ftitle:after{
            background:#8FC31F;
          }
          .detailed ul{
            margin-top:0.5rem;
          }
          .detailed ul li{
            margin-bottom:0.85rem;
          }
          .detailed ul li:nth-last-child(1){
            margin-bottom:0;
          }
          .detailed ul li a{
            display:block;
          }
          .detailed ul li a img{
            width:0.8rem;
            height:0.8rem;
            border-radius:50%;
            float:left;
          }
          .detailed ul li a .info{
            float:left;
            width:calc(100% - 0.8rem);
            padding-left:0.35rem;
          }
          .detailed ul li a .info .left{
            width:calc(100% - 1.8rem);
            float:left;
            padding-right:0.2rem;
          }
          .detailed ul li a .info .left h3{
            font-weight:normal;
            font-size:0.3rem;
            color:#000;
            height:0.3rem;
            line-height:0.3rem;
          }
          .detailed ul li a .info .left span{
            color:#999999;
            font-size:0.27rem;
            height:0.3rem;
            line-height:0.3rem;
            display:block;
            margin-top:0.3rem;
          }
          .detailed ul li a .info .right{
            float:left;
            width:1.8rem;
            font-size:0.33rem;
            height:0.9rem;
            text-align:right;
          }
          .detailed ul li a .info .right div{
            color:#FF0F0F;
            height:0.3rem;
            line-height:0.3rem;
          }
          .detailed ul li a .info .right div:nth-child(1){
            margin-bottom:0.3rem;
          }
          .detailed ul li a .info .right .green{
            color: #56B12E;
          }
          .detailed ul li a .info .right .fied{
            color: #FF0F0F;
            font-size: 0.25rem;
          }
          .detailed ul li a .info .right .audit{
            color: #ccc;
            font-size: 0.25rem;
          }
          .loadText{
            text-align:center;
            padding:0.5rem 0;
          }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <template v-if="list!=null">
            <div id="container">
                <div class="moneyDiv">
                    <img src="../../../image/my/moneyBanner.png" class="bg" />
                    <div class="left">
                        <span>可用余额（元）</span>
                        <h3>{{money}}</h3>
                    </div>
                    <div class="right">
                        <button @click="$.openUrl('common/commonTitle','my/wallet_recharge',{title:'充值'});">充值</button>
                        <button @click="$.openUrl('common/commonTitle','my/wallet_cash',{title:'提现'});">提现</button>
                    </div>
                </div>
                <div class="detailed">
                    <div class="ftitle">余额明细</div>
                    <template v-if="list.length>0">
                        <ul>
                            <li v-for="item in list" @click="goDetail(item)">
                                <a class="clearfix">
                                    <img v-if="item.income > item.pay" src="../../../image/banlance/income_ico.png" />
                                    <img v-if="item.income < item.pay" src="../../../image/banlance/expend_ico.png" />
                                    <div class="info">
                                        <div class="left">
                                            <h3 class="ell">{{item.type}}</h3>
                                            <span class="ell">{{item.time_created | dateFormate}}</span>
                                        </div>
                                        <div class="right ell">
                                            <div v-if="item.income < item.pay" class="green">-{{$.parsePrice(item.pay, 4).replace(/00$/,'')}}</div>
                                            <div v-if="item.income > item.pay" class="red">+{{$.parsePrice(item.income, 4).replace(/00$/,'')}}</div>
                                            <div v-if="item.status == 3" class="audit red">交易失败</div>
                                            <div v-if="item.status != 2 && item.status != 3" class="audit">等待处理</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <div class="loadText">
                            <div class="weui-loadmore" v-if="hasMore">
                                <i class="weui-loading"></i>
                                <span class="weui-loadmore__tips">正在加载</span>
                            </div>
                            <span v-else class="over">我已经到底啦！</span>
                        </div>
                    </template>
                    <template v-else>
                        <div class="minHeightFull whiteBg">
                            <section class="m-no">
                                <div class="u-img"></div>
                                <div class="u-spec">空空如也~</div>
                            </section>
                        </div>
                    </template>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    balance: 0,
                    list:null,
                    page: 1,
                    hasMore: true,
                    isFetching: false,
                },
                computed:{
                    money: function(){
                        return $.parsePrice(this.balance, 2);
                    }
                },
                filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy/MM/dd hh:mm');
                    },
                },
                methods:{
                    fetchBalanceList: function(){
                        if(!this.hasMore){
                            return false;
                        }
                        if(this.isFetching){
                            return false;
                        }
                        this.isFetching = true;
                        var _this = this;
                        var page = this.page;
						
                        $.ajax({
                            url: '/user/balance/info?page='+page,
                            method: 'get',
                            success: function(res){
                                var list = res.data.result;
                                _this.balance = res.data.user_banlance;
                                _this.hasMore = list.length >= res.data.pagesize;
                                if(page === 1){
                                    _this.list = list;
                                }else{
                                    _this.list = _this.list.concat(list);
                                }
                                _this.page += 1;
                            },
                            error: function(err){
                                $.toast(err.message);
                            },
                            done: function(){
                                _this.isFetching = false;
                            }
                        });
                    },
                    goDetail: function(item){
                        $.openUrl('common/commonTitle','my/walletDetail',{title:'资金明细', item: item});
                    }
                },
                mounted(){
					$.initJs(this);
                    this.fetchBalanceList();
                }
            });

            $.pullDown({
				bgColor:"#FFF",
				success:function(){
                    app.page = 1;
                    app.isFetching = false;
					app.hasMore = true;
                    app.fetchBalanceList();
				}
            });

            //上拉加载
            api.addEventListener({
                name:'scrolltobottom',
                extra:{threshold:10}
            }, function(ret, err){
                app.fetchBalanceList();
            });

            api.addEventListener({name: 'updateWalletPage'}, function(ret, err){
                app.page = 1;
				app.hasMore = true;
                app.fetchBalanceList();
            });
        }
    </script>
</body>
</html>
